<template>
  <el-drawer
    title="域名审核"
    :visible="visible"
    direction="rtl"
    size="642px"
    :wrapper-closable="false"
    :before-close="handlerClose"
  >
    <div class="drawer-content">
      <el-form
        ref="domain-form"
        :model="formData"
        size="small"
        label-width="184px"
        label-position="right"
        label-suffix="："
        :rules="rules"
      >
        <el-form-item label="机构">{{ domainInfo.school_title }}</el-form-item>
        <el-form-item v-show="domainInfo.node === 1" label="自定义前缀">{{ domainInfo.sub_domain_prefix }}</el-form-item>
        <el-form-item v-show="domainInfo.node === 1" label="审核通过后访问域名">{{ domainInfo.sub_domain }}</el-form-item>
        <el-form-item v-show="domainInfo.node === 2" label="自定义域名">{{ domainInfo.domain }}</el-form-item>
        <el-form-item v-show="domainInfo.node === 2" label="当前自定义域名状态">
          <status :row="domainInfo"></status>
        </el-form-item>
        <el-form-item v-show="domainInfo.node === 2" label="是否启用HTTPS">
          <is-ssl :row="domainInfo"></is-ssl>
        </el-form-item>
        <el-form-item v-show="domainInfo.node === 2 && domainInfo.is_ssl === 1" label="证书">
          <div>
            <el-link type="primary" :underline="false" target="_blank" :href="domainInfo.ssl_pem_fileurl">域名证书文件</el-link>
          </div>
          <div>
            <el-link type="primary" :underline="false" target="_blank" :href="domainInfo.ssl_key_fileurl">域名密钥文件</el-link>
          </div>
        </el-form-item>
        <el-form-item label="审核" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="0">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="formData.status === 0" label="驳回理由" prop="audit_reason">
          <el-input
            v-model="formData.audit_reason"
            type="textarea"
            :rows="2"
            placeholder="输入驳回理由"
            :maxlength="100"
            show-word-limit
            class="input"
          ></el-input>
        </el-form-item>
      </el-form>
      <form-footer
        class="dialog-footer"
        :loading="disableSubmit"
        confirm-btn-text="提交"
        @cancel="handlerClose"
        @submit="handlerConfirm"
      />
    </div>
  </el-drawer>
</template>

<script>
import FormFooter from '@/components/form-footer'
import IsSsl from '../is_ssl.vue'
import Status from '../status.vue'

export default {
  name: 'AuditDomainDrawer',
  components: {
    FormFooter,
    IsSsl,
    Status
  },
  inject: ['reload'],
  props: {
    visible: {
      type: Boolean,
      require: true
    },
    // 域名信息
    domainInfo: {
      type: Object,
      required: true,
      default: _ => {
        return {}
      }
    }
  },
  data() {
    return {
      disableSubmit: false,
      formData: {
        status: undefined,
        audit_reason: ''
      },
      rules: {
        status: [
          { required: true, message: '请选择审核状态', trigger: ['blur', 'change'] }
        ],
        audit_reason: [
          { required: true, message: '请填写驳回理由', trigger: ['blur', 'change'] },
          {
            validator: (rule, value, callback) => {
              if (this.formData.status === 0 && value === '') {
                return callback(new Error('请填写驳回理由'))
              }
              callback()
            },
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  methods: {
    // 关闭弹出层
    handlerClose() {
      this.$emit('update:visible', false);
    },
    // 提交审核
    handlerConfirm() {
      this.$refs['domain-form'].validate(valid => {
        if (valid) {
          this.disableSubmit = true
          this.$http.post(
              '/school/admin/domain/' + this.domainInfo.id + '/audit',
              {
                ...this.formData,
                mhm_id: this.domainInfo.mhm_id
              },
              ({ msg }) => {
                this.$message.success(msg)
                this.reload()
              },
              ({ msg }) => {
                this.$message.error(msg)
              },
              false
          )
        }
      })
    }
  }
}

</script>

<style scoped lang="scss">
.drawer-content {
  .input {
    width: 342px;
  }
}
</style>
